<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <button @click="msg = 'hello 呀'">改变msg</button> -->

      <!-- <input type="text" v-model="msg"> -->

      <!-- 实现： 一边输入就一边把输入的内容给数据 -->
      <!-- 实现： 数据自动给input显示 -->
      <!-- 
         通过绑定value属性，能实现 数据 -> 界面
         通过input事件，能实现 界面 -> 数据
       -->
      <!-- <input type="text" :value="msg" @input="fn" /> -->

      <!-- $event就是事件对象 -->
      <input type="text" :value="msg" @input="msg = $event.target.value" />

      <!-- 
        所以v-model的原理只是一个语法糖
            少量代码，最终相当于帮你实现更多代码，这就叫语法糖

        所以你对输入框写一个 `v-model="msg"`
            它相当于帮你生成了
                :value="msg" 以及 @input="msg = $event.target.value"

        如果我写 v-model="xx"
            会生成
                :value="xx" 以及 @input="xx = $event.target.value"
       -->

      <p>{{ msg }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            msg: '抠你鸡娃'
          }
        },
        methods: {
          fn (e) {
            // console.log(e)
            // console.log(e.target.value)
            this.msg = e.target.value
          }
        }
      })
    </script>
  </body>
</html>
